$fontSize_20: 1.1vw;
$fontSize_18: 1vw;
$fontSize_16: 0.9vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.2vw;
$fontSize_36: 1.8vw;
$f: 19.2;

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  transition: all 600ms;

  .box {
    margin: 0 190/$f+vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .l {
      display: flex;
      align-items: center;

      .logo {
        position: relative;

        img {
          max-width: 170/$f+vw;
          transition: all 600ms;
          display: block;
        }

        img:nth-child(2) {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
        }
      }

      .links {
        display: flex;
        align-items: center;
        margin-left: 60/$f+vw;

        .item {
          padding: 36/$f+vw 0;

          .a1 {
            color: #fff;
            font-size: 20/$f+vw;
            font-family: 'SourceHanSansCN-Bold';
            transition: all 600ms;
            position: relative;
            &::before{
              content:'';
              display: block;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom:-10px;
              width: 0;
              height: 2px;
              background-color: white;
              transition: all 600ms;
            }
          }

          .active {
            &::before{
              width: 100%;
            }
          }

          .bmenu {
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            display: none;
            box-shadow: 0px 28px 92.2px 0px rgba(189, 189, 189, 0.25);
            .lt {
              width: 25%;
              background: #F7F7F7;
              color: #222;
              font-size: 32/$f+vw;
              font-weight: 500;
              text-transform: capitalize;

              .cn {
                float: right;
                margin: 120/$f+vw 80/$f+vw 134/$f+vw 0;
                font-family: 'PingFang';
              }

              .en {
                color: rgba(235, 236, 238, 0.60);
                font-family: 'Montserrat-Regular.otf';
                font-size: 95/$f+vw;
                position: absolute;
                left: 1vw;
                bottom:1.5vw;
              }
            }

            .rc {
              width: 75%;
              background: #FFF;
              display: flex;
              .list {
                margin: 134/$f+vw 80/$f+vw 50/$f+vw  80/$f+vw;
                a {
                  width: 100%;
                  color: #000;
                  font-size: 20/$f+vw;
                  display: flex;
                  margin-bottom: 48/$f+vw;
                  transition: all 600ms;
                  cursor: pointer;
                  p{
                    font-family: 'PingFang';
                  }
                  svg {
                    width: 24/$f+vw;
                    display: block;
                    transition: all 600ms;
                    margin-left: 3vw;
                    opacity: 0;
                    transform: translateX(-3vw);
                  }

                  &:hover {
                    color: #007EDE;

                    svg {
                      transform: translateX(0);
                      opacity: 1;
                    }
                  }
                }
                .active_menu{
                  color: #007EDE;

                    svg {
                      transform: translateX(0);
                      opacity: 1;
                    }
                }
                div{
                  display: none;
                }
                .on{
                  display: block;
                }
              }
            }
          }

          &:hover {
            .a1{
              &::before{
                width: 100%;
              }
            }
            .bmenu {
              display: flex;
            }
          }
        }
        .line{
          font-size: 16/$f+vw;
          display: block;
          margin: 0 24/$f+vw;
          font-weight: normal;
          color:#fff;
          transition: all 600ms;
        }
      }
    }

    .r {
      display: flex;
      align-items: center;

      .search {
        border: 1px solid #FFF;
        width: 260/$f+vw;
        border-radius: 50px;
        padding: 0 7/$f+vw;
        display: flex;
        align-items: center;
        transition: all 600ms;
        a {
          svg {
            display: block;
            width: 24/$f+vw;
            path{
              transition: all 600ms;
            }
          }
        }

        input {
          color: rgba(255, 255, 255, 0.70);
          font-size: 16/$f+vw;
          font-weight: 250;
          background-color: transparent;
          outline: none;
          border: none;
          line-height: 40/$f+vw;
          margin-left: 11/$f+vw;

          &::placeholder {
            color: rgba(255, 255, 255, 0.70);
          }
        }
      }

      .lan {
        margin-left: 27/$f+vw;

        a {
          color: white;
          font-size: 20/$f+vw;
          margin-right: 11/$f+vw;
          display: inline-block;
          font-family: 'PingFang';
          font-weight: 200;
          transition: all 600ms;
        }
      }
    }
  }
}

.banner{
  .pics{
    position: relative;
    img:nth-child(2){
      position: absolute;
      right:0;
      top:0;
      z-index: -1;
    }
  }
}


.header_page {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) -18%, #636D75 100%);
}

.hasBg,.hasBg2{
  background: #FFF;
  box-shadow: 0px 28px 92.2px 0px rgba(189, 189, 189, 0.25);
  .box{
    .l{
      .logo{
        img:nth-child(1){
          opacity: 0;
        }
        img:nth-child(2){
          opacity: 1;
        }
      }
      .links{
        .item{
          .a1{
            color:#000;
            &::before{
              background-color: #000;
            }
          }
        }
        .line{
          color:#000;
        }
      }
    }
    .r{
      .search{
        border-color: #000;
        a{
          svg{
            path{
              stroke:#000;
            }
          }
        }
        input{
          color:#000;
          &::placeholder{
            color: rgba(0, 0, 0, 0.70);
          }
        }
      }
      .lan{
        a{
          color:#000;
        }
      }
    }
  }
}

.rfixed{
  position: fixed;
  right:0;
  top:50%;
  z-index: 10;
  width: 70/$f+vw;
  a{
    display: block;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(2px);
    padding: 0 10/$f+vw ;
    height: 70/$f+vw;
    margin-top: 10/$f+vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    .position{
      width: 0;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      transition: all 0.3s linear;
      color:white;
      font-size: 18/$f+vw;
    }
    svg{
      width: 50/$f+vw;
      display: block;
    }
    .code{
      img{
        width: 80/$f+vw;
        height: auto;
      }
    }
    &:hover{
      .code{
        display: block;
      }
    }
  }
  a:first-child{
    &:hover{
      .position{
        width: 140/$f+vw;
      }
    }
  }
  a:nth-child(2){
    &:hover{
      .position{
        width:80/$f+vw;
        margin-left: 10/$f+vw;
      }
    }
  }
}

.pheader {
  display: none;
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  left: 0;
  z-index: 1002;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);

  .menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    ;

    a {
      margin-left: 20px;
      transform: translateY(2px);

      img {
        height: 40px;
        object-fit: contain;
      }
    }

    .navbox {
      margin-right: 20px;

      .line {
        width: 30px;
        height: 1px;
        background-color: #000;
        margin: 8px 0;
        -webkit-transition: all .6s;
        transition: all .6s;
      }
    }

    .activeBox {
      .line:nth-child(1) {
        transform: rotate(45deg) translateY(12px);
      }

      .line:nth-child(2) {
        transform: translateX(30px);
        opacity: 0;
      }

      .line:nth-child(3) {
        transform: rotate(-45deg) translateY(-12px);
      }
    }
  }
}

.menuList {
  position: fixed;
  left: 0;
  top: 59px;
  width: 100%;
  z-index: 1001;
  background: white;
  display: none;
  height: calc(100vh - 59px);

  .lan {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;

    a {
      color: #646464;
      margin-left: 10px;
    }

    .active {
      font-weight: bolder;
      color: #000000;
    }
  }

  .item {
    //background: rgba(255,255,255,.8);
    padding: 1rem;
    background-color: #ededed;
    border-bottom: 1px solid #dadada;

    a {
      color: #000;
      display: block;
      position: relative;
      text-transform: uppercase;

      img {
        position: absolute;
        right: 0;
        width: 20px;
        transition: all 600ms;
        top: 5px;
      }

      .icon2 {
        position: static;
        width: auto;
        margin-right: 10px;
      }

      .rotate {
        transform: rotate(90deg);
      }
    }

    .tb {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      a {
        width: 100%;
        display: block;
      }

      img {
        width: 30px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        transition: all 600ms;
      }

      .rotate {
        transform: translateY(-50%) rotate(90deg);
      }
    }

    .types_top {
      display: none;

      a {
        font-size: 14px;
        margin-top: 15px;
      }
    }
  }
}

.activeList {
  transform: translateY(0);
}


.foot{
  // background: url(../images/fbg.png) no-repeat;
  // background-size: cover;
  background: #00142E;
  padding: 43/$f+vw 190/$f+vw 59/$f+vw 190/$f+vw;
  .dom{
    .logo{
      margin-bottom: 47/$f+vw;
      img{
        max-width: 175/$f+vw;
      }
    }
    .icons{
      display: flex;
      a{
        display: block;
        margin-right: 40/$f+vw;
        position: relative;
        img{
          max-width: 34/$f+vw;
          display: block;
        }
        .code{
          position: absolute;
          left: 0;
          transform: translateX(-100%);
          top:0;
          display: none;
          img{
            max-width: 80/$f+vw;
            height: auto;
          }
        }
        &:hover{
          .code{
            display: block;
          }
        }
      }
    }
    .copyright{
      color: #FFF;
      font-size: 16/$f+vw;
      margin-top: 72/$f+vw;
      a{
        color: #FFF;
      }
    }
  }
}




@media screen and (max-width: 1024px) {
  .header {
    display: none;
  }

  .rfixed{
    display: none;
  }

  .pheader {
    display: flex;
  }
  .foot{
    padding: 30px 5% 20px 5%;
    .dom{
      .logo{
        margin-bottom: 20px;
        img{
          height: 40px;
          max-width: inherit;
        }
      }
      .icons{
        a{
          margin-right: 20px;
          img{
            max-width: 20px;
          }
        }
      }
      .copyright{
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.6;
      }
    }
  }
}